@config.main("Synteny block") {

    <style>

            .var {
                font-size: 18px;
                font-weight: bold;
                margin-bottom: 10px;
            }

            .species {
                font-weight: bold;
            }

            .my-label {
                width: 100%;
            }
            .my-label:hover {
                 cursor: pointer;
             }

    </style>

    <div class="body-box">
        <div class="page-box">

            @config.subTitle("Synteny block")

            <div class="main-body">
                @components.navUlComponents(Seq(("byBlocks", "Search Syntenic Blocks", ByBlocks),
                    ("bySpecies", "XY Plot By Species", BySpecies),
                    ("byCircos", "Circos Plot By All Species", ByCircos)
                ), "byBlocks")



                <div id="result"  style="display:none;">
                    <hr>

                    <h5>Result:</h5>
                    <div id="result-box">

                        <button class="btn btn-primary" onclick="DownloadSvgFn('circos')">Dowload SVG <i class="fa fa-download"></i></button>
                        <div id="circos"  ></div>
                    <table id="table" class="table table-bordered" data-pagination="true" data-page-list="[10, 25, 50, 100]"
                    data-advanced-sortable="true">
                        <thead>
                            <tr>
                                <th data-field='name' data-sortable='true' data-search-type="text" data-formatter="GetBlock">Block
                                    ID
                                </th>
                                <th data-field='query' data-sortable='true' data-search-type="text">Query</th>
                                <th data-field='queryStart' data-sortable='true' data-search-type="num">Start</th>
                                <th data-field='queryEnd' data-sortable='true' data-search-type="num">Stop</th>
                                <th data-field='querySize' data-sortable='true' data-search-type="num">Query gap size</th>
                                <th data-field='ref' data-sortable='true' data-search-type="text">Reference</th>
                                <th data-field='refStart' data-sortable='true' data-search-type="num">Start</th>
                                <th data-field='refEnd' data-sortable='true' data-search-type="num">Stop</th>
                                <th data-field='refSize' data-sortable='true' data-search-type="num">Ref gap size</th>
                            </tr>
                        </thead>
                    </table>
                    </div>

                    <div id="dot-box" style="display: flex;
                        justify-content: center"></div>
                </div>
            </div>
        </div>
    </div>



    <script src="@routes.Assets.versioned("circos/d3.v3.min.js")" type="text/javascript"></script>
    <script src="@routes.Assets.versioned("circos/bam2x.circos.js")" type="text/javascript"></script>
    <script src="@routes.Assets.versioned("circos/test.js")" type="text/javascript"></script>
    <script src="@routes.Assets.versioned("blast/js/FileSaver.min.js")" type="text/javascript"></script>
    <script src="@routes.Assets.versioned("Highcharts-9.0.1/highcharts.js")" type ="text/javascript"></script>
    <script src="@routes.Assets.versioned("Highcharts-9.0.1/modules/boost.js")" type ="text/javascript"></script>
    <script src="@routes.Assets.versioned("Highcharts-9.0.1/modules/exporting.js")" type ="text/javascript"></script>


    <script>

        $(function () {
            $("input[type=radio]").click(function () {
                $("input[type=radio]").removeAttr("disabled");
                let check1 = $("input[name=v1]:checked").val()
                let check2 = $("input[name=v2]:checked").val()
                $("input[name=v2][value=" + check1 + "]").attr("disabled", "disabled")
                $("input[name=v1][value=" + check2 + "]").attr("disabled", "disabled")
            })

            $("#table").bootstrapTable();


            $("#species1").val("XJDY")
            $("#species2").val("ZMNO")

            DisData()


            $.post("@routes.BlockController.plotAllSpeciesCircos()",(data)=>{
                let datas = [
                    {
                        "canvas":   "all-circos",
                        "ideoCollection": data.result.collection,
                        "linkCollection": data.result.ur
                    }
                ];
                circos(datas)

            })

        })

        function Search() {
            let index = MyTable.prototype.runningIcon();
            let s1 = $("input[name=v1]:checked").val()
            let s2 = $("input[name=v2]:checked").val()
            $.post("/alfalfa/block/getBlockRangeData?species1=" + s1 + "&species2=" + s2,(data)=>{
                $("#dot-box").empty();
                $("#result-box").show();
                $("#circos").empty();

                $("#table").bootstrapTable("load", data.table);

                let datas = [
                    {
                        "canvas":   "circos",
                        "ideoCollection": data.circos.result.collection,
                        "linkCollection": data.circos.result.ur
                    }
                ];
                circos(datas)
                layer.close(index);
                const $result = $("#result");
                $result.show()
                let target_top = $result.offset().top - 80;
                $("html,body").animate({scrollTop: target_top}, 800);
            })
        }

        function GetBlock(value, row) {
            return `<a href="/alfalfa/block/blockInfoPage?id=${row.id}" target="_blank">${value}</a>`
        }

        function getDotPlot() {

            let index = MyTable.prototype.runningIcon();

            $.ajax({
                url: "@routes.BlockController.getDotPlotBySpecies",
                type: "post",
                data: {
                    "species1": $("#species1").val(),
                    "species2": $("#species2").val()
                },
                success: (data) => {

                    let pos = $.parseJSON(data.pos)
                    let series = $.parseJSON(data.series)


                    $("#result-box").hide()
                    $("#dot-box").empty()

                    let xAxisOffset = -55
                    if(data.xT === "M. sativa cultivar XinJiangDaYe"){
                        xAxisOffset = -5
                    }


                    Highcharts.chart('dot-box', {
                        chart: {
                            type: 'scatter',
                            height: 800,
                            width: 1000
                        },
                        boost: {
                            useGPUTranslations: true,
                            usePreAllocated: true
                        },
                        credits: {
                            enabled: false
                        },
                        exporting: {
                            sourceWidth:1000,
                        },
                        xAxis: {
                            min: 0,
                            gridLineWidth: 1,//网格线宽度
                            showFirstLabel: false,//是否展示第一个x轴下标
                            gridLineDashStyle: "Dash",
                    //        tickPixelInterval: 40,

                            tickInterval:1,
                             tickmarkPlacement:"between",
                            title: {
                                text: data.xT
                            },
                            labels: {
                                x: xAxisOffset,
                                formatter: function () {
                                    return data.xAxis[this.value - 1]
                                }
                            }
                        },
                        yAxis: {
                            min: 0,
                            max: data.yAxis.length,
                            allowDecimals: false,
                            title: {
                                text: data.yT
                            },
                            gridLineWidth: 1,//网格线宽度
                            gridLineDashStyle: "Dash",
                            //tickPixelInterval: 40,
                            showFirstLabel: false,//是否展示第一个x轴下标
                            labels: {
                                y: 45,
                                formatter: function () {
                                    return data.yAxis[this.value - 1]
                                }
                            }
                        },

                        title: {
                            text: `XY Plot between ` + data.xT + ' and ' + data.yT
                        },
                        legend: {
                            enabled: false
                        },
                        plotOptions: {
                            series: {

                                marker: {
                                    radius: 1.5,
                                    symbol: 'circle'
                                },
                                events: {
                                    click: function () {
                                        console.log("this")
                                        console.log(this)
                                    }
                                },
                                tooltip: {
                                    followPointer: false,
                                    pointFormatter: function () {
                                        let x = this.x + "-" + this.y;
                                        let json = pos[x].split("\t").join("<br/>")
                                        return `${json} `
                                    }
                                }
                            }
                        },
                        series: series
                    });
                    const $result = $("#result");
                    $result.show()
                    let target_top = $result.offset().top - 80;
                    $("html,body").animate({scrollTop: target_top}, 800);

                    layer.close(index);
                }
            })
        }

        function DisData() {

            $.each($(`#species1 option`), (i, v) => {
                $(v).removeAttr("disabled")
            })

            $.each($(`#species2 option`), (i, v) => {
                $(v).removeAttr("disabled")
            })

            let select1 = $("#species1").val()
            let select2 = $("#species2").val()
            $(`#species1 option[value=${select2}]`).attr("disabled", "disabled")
            $(`#species2 option[value=${select1}]`).attr("disabled", "disabled")
        }

        function DownloadSvgFn(svg) {
            let svgs = "<svg xmlns=\"http://www.w3.org/2000/svg\"      xmlns:xlink=\"http://www.w3.org/1999/xlink\"" + $("#" + svg).html().substring(4)
            var blob = new Blob([svgs], {
                type: "image/svg+xml"
            });
            saveAs(blob, svg + ".svg")
        }
    </script>
}

    @radio(name:String,value:String,title:Html,isCheck:Boolean=false,isDisabled:Boolean=false) = {
        <div class="form-check">
            <label class="form-check-label my-label">
                <input type='radio' name='@name' value='@value'
                @if(isCheck){checked}
                @if(isDisabled){disabled}
                /><i class="input-helper"></i>@title
            </label>
        </div>
    }

    @ByBlocks ={
        <form class="form-horizontal" id="form">
            <div class="col-md-8" style="display: flex;margin: 0 auto">
                <div class="col-md-6">
                    <div class="var"> Varieties1:</div>
                    @radio("v1","XJDY",Html("<i>M. sativa </i>cultivar XinJiangDaYe"),isCheck = true)
                    @radio("v1","ZMNO",Html("<i>M. sativa </i>cultivar Zhongmu No. 1"),isDisabled = true)
                    @radio("v1","MSAE",Html("<i>M. sativa spp. caerulea</i>"))
                    @radio("v1","MTRU",Html("<i>M. truncatula</i>"))
                </div>

                <div class="col-md-6">
                    <div class="var">Varieties2:</div>
                    @radio("v2","XJDY",Html("<i>M. sativa</i> cultivar XinJiangDaYe"),isDisabled = true)
                    @radio("v2","ZMNO",Html("<i>M. sativa</i> cultivar Zhongmu No. 1"),isCheck = true)
                    @radio("v2","MSAE",Html("<i>M. sativa spp. caerulea</i>"))
                    @radio("v2","MTRU",Html("<i>M. truncatula</i>"))
                </div>
            </div>
            <hr/>
            <div class="col-md-12 form-group">
                <label class="col-sm-2"></label>
                <button type="button" class="btn my-btn" style="width: 200px" onclick="Search()">
                    Search</button>
            </div>
        </form>

    }

@BySpecies = {
    <form class="registration-form col-sm-12 my-form" id="speciesForm">

        <div class="row">
            @components.species2("3", "6", id = "species1", onchange = "DisData()",title="Species1")
            @components.species2("3", "6", id = "species2", onchange = "DisData()",title="Species2" )

        </div>

        <div class="col-md-12 form-group">
            <label class="col-sm-3"></label>
            <button type="button" class="btn my-btn" style="width: 200px" onclick="getDotPlot()">
                Search</button>
        </div>
    </form>
}

@ByCircos = {

    <div id="all-circos">

    </div>
}